<div class="accordion-item" id="all_categories_menu">
  <div class="nav-item-text">
    <a class="nav-link" target="_self" href="#" data-bs-toggle="">
      {{__('ProductCategory::common.all_categories_menu_title')}}
    </a>
    <span class="collapsed" data-bs-toggle="collapse" data-bs-target="#flush-menu-all_categories" aria-expanded="false"><i
        class="bi bi-chevron-down"></i></span>
  </div>
  <div class="accordion-collapse collapse" id="flush-menu-all_categories" data-bs-parent="#menu-accordion">
    @foreach ($categories_menus as $item)
      <div class="children-group">
        <div class="d-flex justify-content-between align-items-center children-title collapsed"
             @if (isset($item['children']) && !empty($item['children']))
               data-bs-toggle="collapse" data-bs-target="#children-menu-all_categories-{{$item['id']}}"
               aria-expanded="false"
             @endif>
          <div>
            <a target="_self" class="nav-link px-0" href="{{$item['go_url']}}">{{$item['description']['name']}}</a>
          </div>
          @if (isset($item['children']) && !empty($item['children']))
            <span class="collapsed" data-bs-toggle="collapse"
                  data-bs-target="#children-menu-all_categories-{{$item['id']}}" aria-expanded="false"><i
                class="bi bi-plus-lg"></i></span>
          @endif
        </div>
        @if (isset($item['children']) && !empty($item['children']))
          <div class="accordion-collapse collapse " id="children-menu-all_categories-{{$item['id']}}"
               data-bs-parent="#flush-menu-all_categories">
            <ul class="nav flex-column ul-children">
              @foreach ($item['children'] as $children)
                <li class="nav-item">
                  <a target="_self" class="nav-link px-0"
                     href="{{$children['go_url']}}">{{$children['description']['name']}}</a>
                  @if (isset($children['children']) && !empty($children['children']))
                    <div class="category_tags">
                    @foreach ($children['children'] as $children2)
                      <div class="el-tag el-tag--success">
                        <a href="{{$children2['go_url']}}">
                          <div class="el_tag_content">
                          {{$children2['description']['name']}}
                          </div>
                        </a>
                      </div>
                    @endforeach
                    </div>
                  @endif
                </li>
              @endforeach
            </ul>
          </div>
        @endif
      </div>
    @endforeach
  </div>
</div>

<style>
  .el-tag.el-tag--success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }

  .el-tag {
    background-color: #ecf5ff;
    display: inline-block;
    min-height: 32px;
    padding: 0 10px;
    margin: 2px;
    line-height: 30px;
    font-size: 12px;
    color: #409eff;
    border: 1px solid #d9ecff;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .el_tag_content{
    white-space: normal;
    max-width: 260px; /* 定义div的宽度 */
    word-wrap: break-word; /* 允许在单词内换行 */
    overflow-wrap: break-word
  }
</style>

<script>
  $(function () {
    initWidth();
    initMenuClick();
  })
  
  function initWidth() {
    var width = $("#all_categories_menu").width()-30;

    $(".category_tags").each(function (index, item) {
      console.log(item);
      $(this).css('width', width + 'px');
    })
    $(".el_tag_content").each(function (index, item) {
      console.log(item);
      $(this).css('max-width', (width - 5) + 'px');
    })
    console.log(width);
  }
  
  function initMenuClick() {
    // 处理没有子菜单的分类点击事件
    $('.children-title').click(function(e) {
      var $this = $(this);
      
      // 如果没有data-bs-toggle属性，说明没有子菜单，应该直接跳转
      if (!$this.attr('data-bs-toggle')) {
        e.preventDefault();
        e.stopPropagation();
        
        var $link = $this.find('a.nav-link');
        if ($link.length > 0) {
          var url = $link.attr('href');
          if (url && url !== '#') {
            window.location.href = url;
          }
        }
      }
    });
  }
</script>
